<template>
	<view>
		<cu-custom :bgColor="'bg-'+theme.backgroundColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">订单跟踪</block>
		</cu-custom>
		<!-- 收货地址 -->
		<view class="bg-white padding flex align-center">
			<view class="cu-avatar round cuIcon-deliver_fill bg-red align-center"></view>
			<view class="" style="flex: 1;width: 0;padding-left: 20rpx">
				<view class="text-black">
					<view class="">
						<text style="margin-right: 10rpx">{{logInfo.userName}}</text>
						<text class="text-sm text-gray">{{ logInfo.telNum }}</text>
					</view>
					<view class="" style="margin-top: 10rpx;">{{ logInfo.address }} </view>
				</view>
			</view>
		</view>
		<!-- 快递信息 -->
		<view class="" v-if="logistData&&logistData.length">
			<view v-for="(item,index) in logistData" :key="index" class="bg-white margin-top-xs"
				style="padding: 30rpx 0;" @click="showDetail(item,index)">
				<!-- 快递信息 -->
				<view class="flex-row-between" style="padding: 0 30rpx;">
					<view class="flex">
						<view class="text-black text-bold cuIcon-locationfill">{{logInfo.logisticsDesc}}</view>
						<view class="text-blue margin-left-sm">{{item.stateDesc}}</view>
					</view>
					<view class="flex align-center">
						<view class="" v-if="item.nu">{{item.nu}}</view>
						<view class="" v-if="item.code==0 && item.data && logistData.length>1"
							style="margin-left: 20rpx;">
							<view class="cuIcon-fold" v-if="item.show"></view>
							<view class="cuIcon-unfold" v-else></view>
						</view>
					</view>
				</view>
				<!-- 物流信息 -->
				<view class="" v-if="item.show || logistData.length==1">
					<view class="margin-top" v-if="item.code==0 && item.data">
						<view class="cu-timeline text-sm Logistics-information" v-for="(item2, index2) in item.data"
							:key="index2">
							<view :class="'cu-item ' + (index2 == 0 ? 'text-green cuIcon-roundcheckfill' : '')">
								<view :class="'content bg-white text-sm' + (index2 == 0 ? 'bg-red' : '')">
									<view class="logisticsTime">
										<view class="text-gray text-sm ">{{item2.ftime.substr(0,10)}}</view>
										<view class="text-gray text-sm ">{{item2.ftime.substr(10)}}</view>
									</view>
									<view class="logisticsAddress">{{item2.context}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="margin-top" style="padding-left: 30rpx;" v-else>
						<view class="">暂无物流信息</view>
					</view>
				</view>

			</view>
		</view>
		<view class="bg-white padding margin-top-xs" v-else>
			<view class="cuIcon-locationfill">暂无物流信息</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import api from 'utils/api'
	import util from 'utils/util'

	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				theme: app.globalData.theme, //全局颜色变量
				logistData: [],
				logInfo: {}, // 收货信息
				orderLogistics: [], // 物流数据
				orderNo: null,
				wxType: 'ybh',
			};
		},

		components: {},
		props: {},

		onShow() {},

		onLoad(options) {
			api.orderGet(options.orderId).then(res => {
				if (res && res.data && res.data.logistics) {
					this.logInfo = res.data.logistics
					this.orderNo = res.data.order.orderNo
					this.orderLogisticsGet(this.orderNo)
				}
			})
		},

		methods: {
			orderLogisticsGet(orderNo) {
				api.getDeliveryInfo(orderNo).then(res => {
					this.logistData = []
					if (res.data && res.data.data && res.data.data.length) {
						const lData = res.data.data
						this.logistData = lData.filter(v => {
							if (v.code == 0 && v.data) {
								v.nu = v.data.nu
								v.stateDesc = v.data.stateDesc
								v.comDesc = v.data.comDesc
								v.data = v.data.data ? JSON.parse(v.data.data) : v.data.data
								v.show = false
							}
							return v.nu && v
						})
						console.log(this.logistData)
					}
				});
			},
			//复制内容
			copyData(e) {
				uni.setClipboardData({
					data: e.currentTarget.dataset.data,
					success: function() {
						uni.showToast({
							title: '复制成功',
						});
					}
				});
			},
			// 展开物流详情
			showDetail(item, index) {
				if (item.code == 0 && item.data && this.logistData.length > 1) {
					this.logistData.map((v, i) => {
						if (i == index) {
							this.$set(v, "show", !v.show)
						}
					})
				}
			}
		}
	};
</script>

<style>
	.Logistics-information {
		margin-left: 160rpx;
	}

	.logisticsTime {
		margin-left: -260rpx;
		margin-top: -20rpx;
	}

	.logisticsAddress {
		margin-top: -74rpx;
		margin-left: -30rpx;
	}

	.without {
		margin-top: -20rpx;
		margin-left: -30rpx;
	}

	.address {
		width: 90%;
		padding-left: 210rpx;
		padding-bottom: 20rpx;
	}
</style>